﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        function checkElment()
        {
            //var div = document.getElementById("box");
            //console.log(div.getElementsByTagName);
            //console.log(div.getElementsByClassName);
            //console.log(div.id);
            //console.log(div.style);
            //console.log(div.innerHTML);
            //console.log(div.innerText);
            //var div = document.getElementById("box");
            //console.log(div.nodeName);
            //console.log(div.nodeType);
            //console.log(div.nodeValue);
            //var att = div.getAttributeNode("class")
            //console.log(att.nodeName);
            //console.log(att.nodeType);
            //console.log(att.nodeValue);
            //var text = div.firstChild;
            //console.log(text.nodeName);
            //console.log(text.nodeType);
            //console.log(text.nodeValue);
        }
            function changesStyle()
            {
                var box = document.getElementById("box");
                var img=document.createElement("img");
                img.setAttribute("src", "images/1.jpg");
                box.appendChild(img);
            }

       

        //function changesStyle()
        //{
        //    var div = document.getElementById("box");
        //    div.style.backgroundColor = "red";
        //    div.removeAttribute("class");
        //    var cls = div.getAttribute("class");
        //    console.log(cls);
        //    div.setAttribute("class",blue); 
        //    console.log(div.setAttribute("class", "blue"));
        //}
    </script>
</head>
<body onload="checkElment()">
    <div id="box"class="red">

    </div>
    <br />
    <button onclick="changesStyle()">插入图片</button>
</body>
</html>
